import React, { useState, useEffect } from 'react';
import { Button, Tooltip, Popover } from 'antd';
import CommonLoading from '@/components/CommonLoading';
import CommonModal from '@/components/CommonModal';
import CommonTable from '@/components/CommonTable';
import { formatZjfImg } from '@/utils/utils.jsx';
import { queryPageDetail } from '../service';

const DetailModal = ({ visible, item, handleVisible }) => {
  const { returnOrderSn } = item;
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const columns = [
    {
      title: '商品',
      dataIndex: 'goodsName',
      key: 'goodsName',
      width: 150,
      render: (text, record) => (
        <div className="flex" style={{ margin: '5px 0' }}>
          <Popover
            content={
              <img
                src={formatZjfImg(record.goodsImage, record.storeId, '84x84')}
                style={{ height: '300px', width: 'auto' }}
              />
            }
          >
            <img
              src={formatZjfImg(record.goodsImage, record.storeId, '48x48')}
              alt=""
              className="img-table"
              style={{ marginRight: 8 }}
            />
          </Popover>
          <div style={{ marginLeft: '8px' }}>
            <Tooltip title={`${record.goodsName} ${record.goodsSpce}`}>
              <div className="common-color4 textOverflowMultiOne">
                {record.goodsName}
              </div>
              <div className="common-color4 textOverflowMultiTwo">
                {record.goodsSpce}
              </div>
            </Tooltip>
          </div>
        </div>
      ),
    },
    {
      title: '商品编码',
      dataIndex: 'goodsCode',
      key: 'goodsCode',
      width: 60,
    },
    {
      title: '总销退数量（正品、次品）',
      dataIndex: 'goodsName',
      key: 'goodsName',
      width: 100,
      render: (text, record, index) => (
        <span>
          <span>
            {record?.qualityNum}、 {record?.defectiveNum}
          </span>
        </span>
      ),
    },
  ];

  //点击组合商品id，请求详细信息，弹框展示
  const getGoodsDetail = async (id) => {
    setLoading(true);
    const res = await queryPageDetail({
      returnOrderSn,
    });
    if (res.success) {
      const { data = [] } = res;
      setData(data);
    }
    setLoading(false);
  };

  useEffect(() => {
    if (visible) {
      getGoodsDetail(returnOrderSn);
    }
  }, [visible]);

  const onCancel = () => {
    setData([]);
    handleVisible();
  };

  //表格
  const tableProps = {
    data,
    columns,
    size: 'small',
    rowKey: 'id',
    scroll: { y: 400 },
  };

  return (
    <CommonModal
      title="商品列表"
      visible={visible}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          关闭
        </Button>,
      ]}
      width={760}
      onCancel={onCancel}
    >
      <div>
        <CommonTable {...tableProps} />
      </div>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default React.memo(DetailModal, (pre, next) => {
  if (pre.item.visible == next.item.visible) {
    return true;
  } else {
    return false;
  }
});
